<!DOCTYPE html>
<html class="zy-page" xmlns:th="http://www.thymeleaf.org" xmlns:zy="http://zuoyy.com">
<head th:replace="common/head :: header(~{::title},~{::link},~{::style})">
    <title></title>

    <style>
        .dict-value {
            max-width: 358px;
            height: 130px;
            border: 1px solid #e6e6e6;
        }
        .dict-value:hover,
        .dict-value:hover .control {
            border-color: #C9C9C9;
        }
        .dict-value .control {
            padding: 4px 8px;
            border-bottom: 1px solid #e6e6e6;
        }
        .dict-value .control button {
            margin: 0;
            border-color: #ffffff;
        }
        .dict-value .control button:hover {
            border-color: #888888;
        }
        .dict-value .control button .fa {
            margin-right: 4px;
            color: #888888;
        }
        .dict-value .control .field-order .fa {
            margin: 0;
        }
        .dict-value .control .field-order.active {
            border-color: #C9C9C9;
        }
        .dict-value .content {
            height: 95px;
            padding: 2px 0;
            overflow: auto;
        }
        .dict-value .content .dict-option {
            margin: 0;
            padding: 2px 0;
            display: block;
            width: 100%;
            border: none;
            text-indent: 4px;
            font-size: 14px;
        }
        .dict-value .content .dict-option:hover {
            background-color: rgba(1, 170, 237, 0.17);
        }
        .dict-value .content .dict-option.active {
            background-color: rgba(1, 170, 237, 0.37);
            font-weight: bold;
        }
        .dict-value .content .dict-option.error {
            background-color: rgba(255, 16, 0, 0.41);
            font-weight: bold;
        }
    </style>
</head>
<body class="zy-page">
<div class="zy-page-form">
    <div class="row">
        <div class="col-lg-7 col-lg-offset-2 col-sm-12">
            <form id="form" method="post" class="form-horizontal">
                <input type="hidden" name="id" th:value="${dto?.id}">
                <div class="form-group">
                    <label class="col-sm-3 col-md-3 control-label"><span class="text-danger">*</span> 字典标识：</label>
                    <div class="col-sm-5 col-md-5">
                        <input name="name" class="form-control required" type="text" placeholder="请输入字典标识" th:value="${dto?.name}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 col-md-3 control-label"><span class="text-danger">*</span> 字典标题：</label>
                    <div class="col-sm-5 col-md-5">
                        <input name="title" class="form-control required" type="text" placeholder="请输入字典标题" th:value="${dto?.title}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 col-md-3 control-label"><span class="text-danger">*</span> 字典类型：</label>
                    <div class="col-sm-5 col-md-5">
                        <select id="select-type" class="form-control" name="type" zy:dict="DICT_TYPE" zy-selected="${dto?.type}"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 col-md-3 control-label"><span class="text-danger">*</span> 字典类型：</label>
                    <div class="col-sm-5 col-md-5">
                        <input id="dictValue" name="value" type="hidden" th:value="${dto?.value}">
                        <div class="dict-value">
                            <div class="control">
                                <button class="field-add layui-btn layui-btn-primary layui-btn-xs">
                                    <i class="fa fa-plus-circle"></i>添加
                                </button>
                                <button class="field-del layui-btn layui-btn-primary layui-btn-xs">
                                    <i class="fa fa-minus-circle"></i>删除
                                </button>
                                <button class="field-up layui-btn layui-btn-primary layui-btn-xs">
                                    <i class="fa fa-arrow-up"></i>向上
                                </button>
                                <button class="field-down layui-btn layui-btn-primary layui-btn-xs">
                                    <i class="fa fa-arrow-down"></i>向下
                                </button>
                                <button class="field-order pull-right layui-btn layui-btn-primary layui-btn-xs">
                                <i class="fa fa-list-ol" aria-hidden="true"></i></button>
                            </div>
                            <div class="content"></div>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 col-md-3 control-label">备注：</label>
                    <div class="col-sm-5 col-md-5">
                        <textarea name="remark" class="form-control" rows="3">[[${dto?.remark}]]</textarea>

                    </div>
                </div>


                <div class="form-actions zy-form-bottom-btn">
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <button class="btn btn-default close-page">取消</button>
                            <button class="btn btn-primary" lay-submit=""><i class="fa fa-save"></i>提交</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>

</div>


<div th:replace="common/htmlJS::common_js(~{::script})">
    <script th:inline="javascript">
        layui.use(['element'], function () {
            var $ = layui.jquery;
            // 默认变量
            var active = null;
            var option = $("<input class='dict-option'>");
            var optionSort = false;

            // 初始化数据
            var dictValue = $("#dictValue");
            if(dictValue.val() !== ""){
                var dict = dictValue.val().split(";");
                var box = $(".dict-value>.content");
                dict.forEach(function (val) {
                    box.append(option.clone().val(val));
                });
            }

            // 获取焦点是选项事件
            $(document).on("focus", ".dict-option", function () {
                if (active != null) {
                    active.removeClass("active");
                }
                active = $(this).addClass("active");
            });

            // 失去焦点是选项事件
            $(document).on("blur", ".dict-option", function () {
                var kv = $(this).val().split(":");
                if(kv.length > 1 && kv[1] !== ""){
                    $(this).removeClass("error");
                    updateDict();
                }else{
                    $(this).addClass("error");
                }
            });

            // 向下添加
            var addOption = function () {
                var clone = option.clone().val("").addClass("active");
                active.after(clone).removeClass("active");
                resetOrder();
                clone.focus();
            };

            // 输入框回车事件
            $(document).on("keypress", ".dict-option", function (e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                    addOption();
                }
            });

            // 添加字段
            $(document).on("click", ".field-add", function (e) {
                e.preventDefault();
                if (active != null) {
                    addOption();
                } else {
                    var clone = option.clone();
                    $(".dict-value>.content").append(clone);
                    clone.focus().addClass("active");
                }
            });

            // 删除字段
            $(document).on("click", ".field-del", function (e) {
                e.preventDefault();
                if (active != null) {
                    active.remove();
                    active = null;
                }
                updateDict();
            });

            // 上移字段
            $(document).on("click", ".field-up", function (e) {
                e.preventDefault();
                if (active != null) {
                    var prev = active.prev();
                    active.insertBefore(prev);
                    resetOrder();
                }
                updateDict();
            });

            // 下移字段
            $(document).on("click", ".field-down", function (e) {
                e.preventDefault();
                if (active != null) {
                    active.insertAfter(active.next());
                    resetOrder();
                }
                updateDict();
            });

            // 数字顺序开关
            $(document).on("click", ".field-order", function (e) {
                e.preventDefault();
                if ((optionSort = !optionSort)) {
                    $(this).addClass("active");
                    resetOrder();
                    updateDict();
                } else {
                    $(this).removeClass("active");
                }
            });

            // 重置数字顺序
            var resetOrder = function () {
                if(!optionSort) return;
                var index = 1;
                $(".dict-value>.content input").each(function (key, val) {
                    var kv = $(val).val().split(":");
                    if (key === 0 && kv.length > 0 && kv[0] !== "") {
                        index = kv[0];
                    }
                    var oVal = (index++) + ":";
                    if (kv.length > 1 && kv[1] !== "") {
                        oVal += kv[1];
                    }
                    $(val).val(oVal);
                });
            }

            // 更新字典值
            var updateDict = function () {
                var value = "";
                $(".dict-value>.content input").each(function (key, val) {
                    var kv = $(val).val().split(":");
                    if(kv.length > 1 && kv[1] !== ""){
                        value += kv[0] + ":" + kv[1] + ";";
                    }
                });
                if (value !== "") {
                    value = value.substr(0, value.length - 1);
                }
                dictValue.val(value);
            }


            $("#form").validate({
                submitHandler: function (form) {
                    if(dictValue.val()==''){
                        layer.msg('请输入字典值', {icon: 2,shift: 6});
                        return;
                    }
                    zy.ajaxSubmit(form, {
                        url: basePath + '/system/dict/save',
                        success: function (result) {
                            if (result.code == 200) {
                                parent.layer.msg('操作成功');
                                parent._table.draw(false);
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            } else {
                                layer.msg(result.msg, {icon: 2,shift: 6});
                            }

                        }
                    });
                }

            });

        });




    </script>
</div>
</body>
</html>